<template>
	<view class="box" style="display: flex; align-items: center; justify-content: center;">
    <view class="box-div">
      <view class="top_wrapper">
      	<view class="top_b" :class="{'active': item.is_show}" v-for="item in list" :key="item">
      		<view class="top_block">
      			<view>{{item.name}}</view>
      			<view></view>
      		</view>
      	</view>
      </view>
      <image src="../../static/image/index/m@2x.png" class="l_img"></image>
      <view class="btn1" v-if="is_btn === 1" @click="get_login">一键登录</view>
      <button open-type="getPhoneNumber" class="btn1" v-if="is_btn === 2" @getphonenumber="get_phone">快捷获取手机号</button>
	  <view class="btn3" style="margin-top:10px ;" @click="goback">暂不登录</view>
      <view class="font_23 color_ac login_des flex6">
      	<view class="icon_img" @click="is_agree = !is_agree">
      		<image src="../../static/image/index/b1@2x.png" v-if="!is_agree"></image>
      		<image src="../../static/image/index/c1@2x.png" v-if="is_agree"></image>
      	</view>
      	<view class="flex3 font26 animated" :class="{'active': is_btn_num === 1}">
      		请仔细阅读并同意<text class="color_ff6a00" @click="get_link('yhxy')">《用户协议》</text><text class="color_ff6a00" @click="get_link('ysxy')">《隐私协议》</text>
      	</view>
      </view>
    </view>
		
    
    
    <!-- 隐私保护指引 -->
    <view class="pup" v-if="agreePrivacyAuthorizationPup" style="">
      <view class="box">
        <view class="div1" v-show="!privacyCon">
          在使用【无包游】服务之前，请仔细阅读<text class="red" @click="privacyCon = true">《无包游隐私保护指引》</text>。如您同意《无包游隐私保护指引》，请点击“同意”开始使用【无包游】
          <view class="flex-ct">
            <button id="disagree-btn" type="default"  class="weui-btn disagree-btn" @click="handleDisagree">拒绝</button>
            <button id="agree-btn" type="default" open-type="agreePrivacyAuthorization" class="weui-btn agree-btn" @agreeprivacyauthorization="handleAgree">同意</button>
          </view>
        </view>
        <view class="div2" v-show="privacyCon">
          <view class="tit">无包游隐私保护指引</view>
          <view class="con-h">
            <u-parse :content="user_yinsi"></u-parse>
          </view>
          <view class="flex-ct">
            <button class="weui-btn agree-btn" @click="privacyCon = false">我已阅读</button>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
  let resolvePrivacyAuthorization = null;
  import uParse from '@/components/u-parse/u-parse.vue';
	export default {
    components: {
    	uParse
    },
		data() {
			return {
				is_login_btn: true, // 防连点
				share_code: '',
				is_btn: 1, // 1-登录 2-手机号
				is_agree: false,
				list: [{
					name: '覆盖全国各大城市',
					is_show: false
				}, {
					name: '遍布经典、交通枢纽、商圈',
					is_show: false
				}, {
					name: '每年安全寄存超100万件',
					is_show: false
				}, {
					name: '价格便宜，平均5~10元/天',
					is_show: false
				}, {
					name: '登录即送新人优惠券',
					is_show: false
				}],
        
        
        agreePrivacyAuthorizationPup:false,
        user_yinsi:"",
        privacyCon: false, // 隐私内容的弹窗
			}
		},
		onLoad(e) {
      uni.setStorageSync('upOrder',1);
			setTimeout(() => {
				this.list[0].is_show = true;
			}, 200)

			setTimeout(() => {
				this.list[1].is_show = true;
			}, 600)

			setTimeout(() => {
				this.list[2].is_show = true;
			}, 1000)

			setTimeout(() => {
				this.list[3].is_show = true;
			}, 1400)

			setTimeout(() => {
				this.list[4].is_show = true;
			}, 1800)

			if (e.share_code) {
				this.share_code = e.share_code;
			}
      
      this.agreePrivacyAuthorization();
      this.$http.get(this.$api.getPolicyApi, {
      	port: 1
      }).then(res=>{
        console.log('隐私', res, res.data)
        if(res.code == 200){
          this.user_yinsi = res.data[0].content_text
        }
        
      })
		},
		methods: {
      // 不同意按钮
			  handleDisagree(e) {
			   resolvePrivacyAuthorization({buttonId: 'disagree-btn', event: 'disagree'});
			   this.agreePrivacyAuthorizationPup = false;
			  },
			  // 同意按钮逻辑
			  handleAgree(e){
				resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' });
				this.agreePrivacyAuthorizationPup = false;
			  },
			  // 默认执行 判断用户是否同意了隐私授权
			  agreePrivacyAuthorization(e){
				const that = this;
				wx.onNeedPrivacyAuthorization(resolve => {
				  console.log('resolve====>',resolve)
				  // 需要用户同意隐私授权时 弹出开发者自定义的隐私授权弹窗
				  this.agreePrivacyAuthorizationPup = true;
				  resolvePrivacyAuthorization = resolve
				})
				wx.requirePrivacyAuthorize({
				  success: () => {
					// 用户同意授权 继续小程序逻辑
					this.agreePrivacyAuthorizationPup = false;
					
				  },
				  fail: () => {
					
				  }, // 用户拒绝授权
				  complete:() => {
					
				  }
				})
			  },
			  
	
			// 授权登录
			get_login() {
        console.log('一键登录')
				let self = this;
				if(!this.is_agree){
					getApp().get_msg('请先同意用户协议');
					return;
				}
				if (self.is_login_btn) {
					self.is_login_btn = false;

					uni.getUserProfile({
						desc: '用于完善会员资料',
						success: function(res) {
              console.log('信息完善', res)
							self.get_code(res);
						},
						fail: function(e) {
							self.is_login_btn = true;
              console.log('信息完善失败', e)
						}
					})
				}
			},
			goback(){
				uni.switchTab({
				url: '/pages/index/index'  // TabBar 页面路径
			  });
			},
			get_code(res) {
				let self = this;
				uni.login({
					success: function(loginRes) {
						let code = loginRes.code;
						getApp().get_loading();

						self.$http.post(self.$api.login, {
							code: code
						}).then(e => {
							self.is_login_btn = true;

							uni.setStorageSync('token', e.data.token);

							if (!e.data.is_login) {
								self.get_user_info(res);
							}

							if (e.data.is_login && !e.data.is_mobile) {
								self.is_btn = 2;
							}

							if (e.data.is_login && e.data.is_mobile) {
								getApp().get_msg('登录成功');
								getApp().get_back();
								uni.setStorageSync('orderList', true);
							}
						})
					}
				});
			},
			get_user_info(res) {
				this.$http.post(this.$api.saveUserInfo, {
					iv: res.iv,
					encryptedData: res.encryptedData,
					share_code: this.share_code
				}).then(e => {
					if (!e.data.is_mobile) {
						this.is_btn = 2;
					}

					if (e.data.is_mobile) {
						getApp().get_msg('登录成功');
						getApp().get_back();
					}
				})
			},
			// 授权手机号
			get_phone(e) {
				let submit_info = {};

				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					submit_info = {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					}

					getApp().get_loading();

					this.$http.post(this.$api.setUserMobile, submit_info).then(res => {
						getApp().get_msg('手机号授权成功');
						getApp().get_back();
					})
				} else {
					getApp().get_msg('您拒绝了授权手机号');
					getApp().get_back();
				}
			},
			// 用户协议
			get_link(e) {
				getApp().get_navigate_url('/pages/fwb/index?type='+e);
			}
		}
	}
</script>

<style lang="less">
  .pup{
    position: fixed; left: 50%; width: 100%; height: 100%; top: 50%; transform: translate(-50%,-50%); z-index: 999; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,.5);
    .box{
      background-color: #fff; width: 86%; padding: 30rpx; border-radius: 10rpx; font-size: 28rpx; box-sizing: border-box; line-height: 1.8; min-height: 300rpx;
      .weui-btn{width: 160rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; line-height: 1; margin: 0; font-size: 28rpx; border-radius: 4rpx !important; margin: 26rpx 15rpx ;}
      .agree-btn{background-color: #17c317 !important; border-color: #17c317; color: #fff;}
      .red{color: #ad6b06; font-size: 28rpx;}
      .div2{line-height: 1.8;
        .agree-btn{margin-top: 40rpx; width: 180rpx;}
      }
      .tit{margin-bottom: 10rpx; text-align:  center; font-weight: bold;}
    }
    .con-h{
      max-height: 70vh; overflow-y: auto;
    }
  }
  .btn3 {
      width: 642rpx;
      height: 87rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 35rpx;
      line-height: 48rpx;
      font-weight: bold;
      color: #000000;
      margin: 0 auto;
      box-shadow: 0px 6px 12px rgba(255, 106, 0, 0.28);
      border-radius: 48rpx;
  }
  .flex-bect{display: flex;align-items: center; justify-content: space-between;}
  .flex-be{display: flex;align-items: flex-start; justify-content: space-between;}
  .flex-le{display: flex;align-items: flex-start;justify-content: flex-start;}
  .flex-lect{display: flex;align-items: center; justify-content: flex-start;}
  .flex-rict{display: flex;align-items: center; justify-content: flex-end;}
  .flex-ct{display: flex;align-items: center; justify-content: center;}
  .flex1{width: 100%; flex: 1;}
  
  
	.login_des {
		margin: 30rpx 0 0;
		line-height: 50rpx;
	}

	.l_img {
		width: 345rpx;
		height: 357rpx;
		margin: 60rpx auto 117rpx;
	}

	.top_wrapper {
		// margin: 158rpx 0 0;
	}
  .box-div{width: 100%;}

	.icon_img {
		padding: 10rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.top_b {
		opacity: 0;
		transition: opacity 1.5s;

		&.active {
			opacity: 1;
		}

		&:first-child {
			margin-left: 46rpx;

			.top_block {
				view {
					&:first-child {
						background-color: #FE9A01;
					}

					&:nth-child(2) {
						border-top: 6rpx solid #FE9A01;
					}
				}
			}
		}

		&:nth-child(2) {
			margin-top: 17rpx;
			margin-left: 323rpx;

			.top_block {
				view {
					&:first-child {
						background-color: #FDC400;
					}

					&:nth-child(2) {
						border-top: 6rpx solid #FDC400;
					}
				}
			}
		}

		&:nth-child(3) {
			margin-left: 92rpx;
			margin-top: 17rpx;

			.top_block {
				view {
					&:first-child {
						background-color: rgb(44, 70, 164);
					}

					&:nth-child(2) {
						border-top: 6rpx solid rgb(44, 70, 164);
					}
				}
			}
		}

		&:nth-child(4) {
			margin-top: 23rpx;
			margin-left: 388rpx;

			.top_block {
				view {
					&:first-child {
						background-color: #4B7CE5;
					}

					&:nth-child(2) {
						border-top: 6rpx solid #4B7CE5;
					}
				}
			}
		}

		&:nth-child(5) {
			margin-top: -36rpx;
			margin-left: 46rpx;

			.top_block {
				view {
					&:first-child {
						background-color: #B682FA;
					}

					&:nth-child(2) {
						border-top: 6rpx solid #B682FA;
					}
				}
			}
		}
	}

	.top_block {
		display: inline-block;

		view {
			&:first-child {
				color: #fff;
				font-size: 23rpx;
				line-height: 33rpx;
				font-weight: bold;
				padding: 17rpx 23rpx;
				border-radius: 35rpx;
			}

			&:nth-child(2) {
				width: 0;
				height: 0;
				margin: 0 auto;
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;
			}
		}
	}
</style>
